<template>
  <!-- 涉案材料和详情 -->

  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="drawer"
    width="70%"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="@/assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <!-- 任务基本信息描述 -->
    <div class="descriptionsContainer1" v-if="type !== 'caseData'">
      <div class="pageHeader">任务基本信息</div>
      <el-descriptions
        class="descriptions"
        :column="3"
        size="medium"
        labelClassName="label"
        contentClassName="content"
      >
        <el-descriptions-item label="任务名称">{{
          formData.taskName
        }}</el-descriptions-item>
        <el-descriptions-item label="所属案件">
          {{ formData.caseName }}
        </el-descriptions-item>
        <el-descriptions-item label="案件类型">
          <dict-tag
            :options="dict.type.case_type"
            :value="formData.taskType"
          ></dict-tag>
        </el-descriptions-item>
        <el-descriptions-item label="当前环节">
          <dict-tag
            :options="dict.type.current_link"
            :value="formData.currentLink"
          ></dict-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
    </div>

    <!-- 涉案人信息 -->
    <div class="descriptionsContainer1">
      <div class="pageHeader">涉案人信息</div>
      <el-descriptions
        class="descriptions"
        :column="3"
        size="medium"
        labelClassName="label"
        contentClassName="content"
      >
        <el-descriptions-item label="姓名">{{
          formData.involvedPersonVO.name
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">
          {{ formData.involvedPersonVO.zjh }}
        </el-descriptions-item>

        <el-descriptions-item label="联系电话">
          {{ formData.involvedPersonVO.tel }}
        </el-descriptions-item>
        <el-descriptions-item label="户籍地址">{{
          formData.involvedPersonVO.residenceAddress
        }}</el-descriptions-item>
        <el-descriptions-item label="居住地址">{{
          formData.involvedPersonVO.oucodeNameList[0] +
          formData.involvedPersonVO.oucodeNameList[1] +
          formData.involvedPersonVO.oucodeNameList[2] +
          formData.involvedPersonVO.liveAddress
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
    </div>
    <!-- 待核查信息 -->
    <div
      v-if="uncheckedInformation.length !== 0"
      class="descriptionsContainer1"
    >
      <div class="pageHeader">待核查信息</div>
      <div :key="index" v-for="(unCheck, index) in uncheckedInformation">
        <el-descriptions
          class="unchecked"
          :column="4"
          size="medium"
          labelClassName="label"
          contentClassName="content"
        >
          <el-descriptions-item label="投资金额(元)">{{
            uncheckedInformation[index].investmentMoney
          }}</el-descriptions-item>
          <el-descriptions-item label="提取金额(元)">
            {{ uncheckedInformation[index].withdrawalMoney }}
          </el-descriptions-item>
          <el-descriptions-item label="损失金额(元)">{{
            uncheckedInformation[index].lossMoney
          }}</el-descriptions-item>
          <el-descriptions-item label="时间">
            {{ uncheckedInformation[index].time }}
          </el-descriptions-item>
          <el-descriptions-item label="开户银行">{{
            uncheckedInformation[index].accountBank
          }}</el-descriptions-item>
          <el-descriptions-item label="开户名称">
            {{ uncheckedInformation[index].accountName }}
          </el-descriptions-item>
          <el-descriptions-item label="开户账号">{{
            uncheckedInformation[index].accountNum
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="pageHeaderSub">
          <div class="title">*相关附件</div>
          <el-button
            class="searchButton1"
            @click="allpicDownload(unCheck.taskAccessoryList)"
            >下载</el-button
          >
        </div>

        <div class="enclosuresBox">
          <div
            class="enclosures2"
            v-for="(item, index) in unCheck.taskAccessoryList"
            :key="index"
          >
            <div class="enclosurebtn2">
              <el-image
                v-if="item.picUrl"
                fit="cover"
                class="picPreview"
                :src="item.picUrl"
              />
              <div class="enclosurebtn3">
                <div class="enclosurebtn4">
                  <img
                    class="enclosureDel3"
                    @click="handleDownload(item)"
                    src="@/assets/images/downloadIcon.png"
                  />
                  <img
                    @click="handlePreview(item)"
                    class="enclosureDel3"
                    src="@/assets/images/viewIcon.png"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-divider
          v-if="index !== uncheckedInformation.length - 1"
        ></el-divider>
      </div>
      <el-divider></el-divider>
    </div>
    <!-- 公安调查结果 -->
    <div class="descriptionsContainer1" v-if="formData.policeInvestigation">
      <div class="pageHeader">公安调查结果</div>
      <el-row :gutter="24">
        <!-- <el-col
          v-if="formData.currentLink == 3 && type == 'caseData'"
          :span="15"
        >
          <el-form
            class="Investigationform"
            ref="form"
            :model="formData"
            :inline="true"
            :rules="rules"
          >
            <el-form-item label="调查结果:" prop="policeInvestigation">
              <el-input
                class="Investigation"
                v-model="formData.policeInvestigation"
                placeholder="请输入"
                :maxlength="300"
                show-word-limit
                :autosize="{ minRows: 5 }"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="23">
          <el-descriptions
            size="medium"
            labelClassName="label"
            contentClassName="content"
          >
            <el-descriptions-item label="调查结果">{{
              formData.policeInvestigation
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div class="pageHeaderSub">
        <div class="title">*相关附件</div>
        <el-button
          class="searchButton1"
          @click="allpicDownload(policeEnclosure)"
          >下载</el-button
        >
      </div>
      <div class="enclosuresBox">
        <div
          class="enclosures2"
          v-for="(item, index) in policeEnclosure"
          :key="index"
        >
          <div class="enclosurebtn2">
            <el-image
              v-if="item.picUrl"
              fit="cover"
              class="picPreview"
              :src="item.picUrl"
            />
            <div class="enclosurebtn3">
              <div class="enclosurebtn4">
                <img
                  class="enclosureDel3"
                  @click="handleDownload(item)"
                  src="@/assets/images/downloadIcon.png"
                />
                <img
                  @click="handlePreview(item)"
                  class="enclosureDel3"
                  src="@/assets/images/viewIcon.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>

    <!-- 检察院审查结果 -->
    <div
      class="descriptionsContainer1"
      v-if="formData.procuratorateInvestigation"
    >
      <div class="pageHeader">检查院审查结果</div>
      <el-row :gutter="24">
        <!-- <el-col
          v-if="formData.currentLink == 5 && type == 'caseData'"
          :span="15"
        >
          <el-form
            class="Investigationform"
            ref="form"
            :rules="rules"
            :model="formData"
            size="small"
            :inline="true"
          >
            <el-form-item label="审查结果:" prop="procuratorateInvestigation">
              <el-input
                class="Investigation"
                v-model="formData.procuratorateInvestigation"
                placeholder="请输入"
                :maxlength="300"
                show-word-limit
                :autosize="{ minRows: 7 }"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="23">
          <el-descriptions
            size="medium"
            labelClassName="label"
            contentClassName="content"
          >
            <el-descriptions-item label="审查结果">{{
              formData.procuratorateInvestigation
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div class="pageHeaderSub">
        <div class="title">*相关附件</div>
        <el-button
          class="searchButton1"
          @click="allpicDownload(procuraEnclosure)"
          >下载</el-button
        >
      </div>
      <div class="enclosuresBox">
        <div
          class="enclosures2"
          v-for="(item, index) in procuraEnclosure"
          :key="index"
        >
          <div class="enclosurebtn2">
            <el-image
              v-if="item.picUrl"
              fit="cover"
              class="picPreview"
              :src="item.picUrl"
            />
            <div class="enclosurebtn3">
              <div class="enclosurebtn4">
                <img
                  class="enclosureDel3"
                  @click="handleDownload(item)"
                  src="@/assets/images/downloadIcon.png"
                />
                <img
                  @click="handlePreview(item)"
                  class="enclosureDel3"
                  src="@/assets/images/viewIcon.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>

    <!-- 法院认定结果 -->
    <div class="descriptionsContainer1" v-if="formData.courtJudgement">
      <div class="pageHeader">法院认定结果</div>
      <el-row :gutter="24">
        <!-- <el-col
          v-if="formData.currentLink == 7 && type == 'caseData'"
          :span="15"
        >
          <el-form
            class="Investigationform"
            ref="form"
            :rules="rules"
            :model="formData"
            size="small"
            :inline="true"
          >
            <el-form-item label="认定结果:" prop="courtJudgement">
              <el-input
                class="Investigation"
                v-model="formData.courtJudgement"
                placeholder="请输入"
                :maxlength="300"
                show-word-limit
                :autosize="{ minRows: 7 }"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="23">
          <el-descriptions
            size="medium"
            labelClassName="label"
            contentClassName="content"
          >
            <el-descriptions-item label="认定结果">{{
              formData.courtJudgement
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div class="pageHeaderSub">
        <div class="title">*相关附件</div>
        <el-button class="searchButton1" @click="allpicDownload(courtEnclosure)"
          >下载</el-button
        >
      </div>
      <div class="enclosuresBox">
        <div
          class="enclosures2"
          v-for="(item, index) in courtEnclosure"
          :key="index"
        >
          <div class="enclosurebtn2">
            <el-image
              v-if="item.picUrl"
              fit="cover"
              class="picPreview"
              :src="item.picUrl"
            />
            <div class="enclosurebtn3">
              <div class="enclosurebtn4">
                <img
                  class="enclosureDel3"
                  @click="handleDownload(item)"
                  src="@/assets/images/downloadIcon.png"
                />
                <img
                  @click="handlePreview(item)"
                  class="enclosureDel3"
                  src="@/assets/images/viewIcon.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button class="resetButton" @click="cancel">取消</el-button>
        <!-- <el-button class="searchButton" @click="Submit" v-if="!isShow"
          >确定</el-button
        > -->
      </div>
    </div>

    <picPreview ref="picPreview" :picUrl="picUrl"></picPreview>
  </el-dialog>
</template>

<script>
import picPreview from "./picPreview.vue";
import { MODALTYPE, FILETYPE } from "../../../../utils/variable";
import {
  updateCheckTask,
  getCheckTask,
  onlinePreview,
  downloadFile,
} from "@/api/checkTask/task";
export default {
  dicts: ["case_type", "current_link", "overtime_state"],
  name: "taskDrawer",
  components: { picPreview },
  data() {
    return {
      picUrl: "",
      //抽屉是否显示
      drawer: false,
      title: "",
      oucodeData: [],
      unCheckEnclosure: [],
      policeEnclosure: [],
      procuraEnclosure: [],
      courtEnclosure: [],
      tableData: [],
      // 待核查信息
      uncheckedInformation: [],
      formData: {
        // 任务名称
        taskName: "",
        // 任务类型
        taskType: "",
        currentLink: "",
        involvedPersonVO: {
          name: "",
          zjh: "",
          oucodeList: ["省", "市", "区县"],
          oucodeNameList: ["省", "市", "区县"],
          residenceAddress: "",
          liveAddress: "",
          tel: "",
        },
        policeInvestigation: "",
        procuratorateInvestigation: "",
        courtJudgement: "",
      },
      rules: {
        policeInvestigation: [
          {
            required: true,
            message: "调查结果",
            trigger: "blur",
          },
        ],
        procuratorateInvestigation: [
          {
            required: true,
            message: "调查结果",
            trigger: "change",
          },
        ],
        courtJudgement: [
          {
            required: true,
            message: "调查结果",
            trigger: "change",
          },
        ],
      },
    };
  },
  props: ["type", "id"],
  methods: {
    // 图片一键下载
    allpicDownload(item) {
      if (item.length == 0) {
        this.$message({
          message: "当前相关附件为空",
          type: "warning",
        });
      } else {
        for (let i = 0; i < item.length; i++) {
          this.handleDownload(item[i]);
        }
      }
    },
    // 附件下载按钮操作
    handleDownload(item) {
      this.download(
        "/file/downloadFileNew",
        {
          filename: item.url,
        },
        item.url
      );
    },
    // 附件预览按钮操作
    handlePreview(item) {
      // if (item.fileType == "pdf") {
      //   downloadFile(item.url).then((res) => {
      //     const pdfFile = window.URL.createObjectURL(
      //       new Blob([res], { type: "application/pdf" })
      //     );
      //     window.open(pdfFile);
      //     URL.revokeObjectURL(pdfFile);
      //   });
      // }
      let queryParam = {
        filename: item.url,
      };
      downloadFile(queryParam).then((res) => {
        let blob = new Blob([res]); // 返回的文件流数据
        let url = window.URL.createObjectURL(blob); // 将他转化为路径
        this.picUrl = url; // 将转换出来的路径赋值给变量，其实和上一步结合就可以
        this.$refs.picPreview.open = true;
      });
      // } else {
      //   onlinePreview(item.url).then((res) => {
      //     const pdfFile = window.URL.createObjectURL(
      //       new Blob([res], { type: "application/pdf" })
      //     );
      //     window.open(pdfFile);
      //     URL.revokeObjectURL(pdfFile);
      //   });
      // }
    },

    //取消
    cancel() {
      this.$emit("update:type", "");

      this.drawer = false;
    },
    //提交
    // Submit() {
    //   if (this.type == MODALTYPE["涉案材料"]) {
    //     this.formData.involvedPersonList = this.tableData;
    //     this.formData.taskAccessoryList = [
    //       ...this.policeEnclosure,
    //       ...this.procuraEnclosure,
    //       ...this.courtEnclosure,
    //       ...this.unCheckEnclosure,
    //     ];
    //     updateCheckTask(this.formData).then((response) => {
    //       this.$modal.msgSuccess("修改成功");
    //       this.$emit("update:type", "");
    //       this.drawer = false;
    //       this.$emit("fatherMethod");
    //     });
    //   }
    // },

    showPic(list) {
      if (list.length != 0) {
        for (let i = 0; i < list.length; i++) {
          let queryParam = {
            filename: list[i].url,
          };
          downloadFile(queryParam).then((res) => {
            let blob = new Blob([res]); // 返回的文件流数据
            let picurl = window.URL.createObjectURL(blob); // 将他转化为路径
            this.$set(list[i], "picUrl", picurl);
          });
        }
      }
    },
  },
  // computed: {
  //   isShow() {
  //     if (
  //       this.type == MODALTYPE["详情"] ||
  //       !(this.formData.currentLink == 4 && this.type == "caseData") ||
  //       !(this.formData.currentLink == 6 && this.type == "caseData") ||
  //       !(this.formData.currentLink == 7 && this.type == "caseData")
  //     ) {
  //       return true;
  //     } else {
  //       return false;
  //     }
  //   },
  //   buttonTitle() {
  //     if (
  //       this.type == MODALTYPE["详情"] ||
  //       !(this.formData.currentLink == 4 && this.type == "caseData") ||
  //       !(this.formData.currentLink == 6 && this.type == "caseData") ||
  //       !(this.formData.currentLink == 7 && this.type == "caseData")
  //     ) {
  //       return "关闭";
  //     } else {
  //       return "取消";
  //     }
  //   },
  // },

  watch: {
    type(val) {
      if (this.type == MODALTYPE["涉案材料"]) {
        getCheckTask(this.id).then((response) => {
          this.formData = response.data;
          this.uncheckedInformation = response.data.uncheckInfoList;
          if (this.uncheckedInformation.length != 0) {
            for (let i = 0; i < this.uncheckedInformation.length; i++) {
              if (this.uncheckedInformation[i].taskAccessoryList.length != 0) {
                this.showPic(this.uncheckedInformation[i].taskAccessoryList);
              }
            }
          }
          this.policeEnclosure = response.data.taskAccessory[
            FILETYPE.policeEnclosure
          ]
            ? response.data.taskAccessory[FILETYPE.policeEnclosure]
            : [];
          this.showPic(this.policeEnclosure);
          this.procuraEnclosure = response.data.taskAccessory[
            FILETYPE.procuraEnclosure
          ]
            ? response.data.taskAccessory[FILETYPE.procuraEnclosure]
            : [];
          this.showPic(this.procuraEnclosure);
          this.courtEnclosure = response.data.taskAccessory[
            FILETYPE.courtEnclosure
          ]
            ? response.data.taskAccessory[FILETYPE.courtEnclosure]
            : [];
          this.showPic(this.courtEnclosure);
          this.title = "涉案材料";
          this.drawer = true;
        });
      } else if (this.type == MODALTYPE["详情"]) {
        if (this.id) {
          // 调用后端接口通过id去获取任务的信息
          getCheckTask(this.id).then((response) => {
            this.formData = response.data;
            this.uncheckedInformation = response.data.uncheckInfoList;
            if (this.uncheckedInformation.length != 0) {
              for (let i = 0; i < this.uncheckedInformation.length; i++) {
                if (
                  this.uncheckedInformation[i].taskAccessoryList.length != 0
                ) {
                  this.showPic(this.uncheckedInformation[i].taskAccessoryList);
                }
              }
            }
            this.policeEnclosure = response.data.taskAccessory[
              FILETYPE.policeEnclosure
            ]
              ? response.data.taskAccessory[FILETYPE.policeEnclosure]
              : [];
            this.showPic(this.policeEnclosure);
            this.procuraEnclosure = response.data.taskAccessory[
              FILETYPE.procuraEnclosure
            ]
              ? response.data.taskAccessory[FILETYPE.procuraEnclosure]
              : [];
            this.showPic(this.procuraEnclosure);
            this.courtEnclosure = response.data.taskAccessory[
              FILETYPE.courtEnclosure
            ]
              ? response.data.taskAccessory[FILETYPE.courtEnclosure]
              : [];
            this.showPic(this.courtEnclosure);
            this.title = "详情";
            this.drawer = true;
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/dialog.scss"; //模态框样式
@import "../../../../assets/styles/drawer.scss";

.title {
  text-align: left;
  margin: 5px 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #5e5c5c;
}
.enclosuresBox {
  display: flex;
  flex-wrap: wrap;
}

// 图标悬浮
.enclosures2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  height: 120px;
  padding-right: 50px;

  // 图片区域
  .enclosurebtn2 {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    width: 100%;
    height: 80%;
    // 按钮区域
    .enclosurebtn3 {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(101, 101, 101, 0.6);
      opacity: 0;
      width: 100%;
      height: 100%;

      // 图标样式
      .enclosurebtn4 {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .enclosureDel3 {
        width: 25px;
        height: 25px;
        margin: 5px;
        background-blend-mode: lighten;
        background-size: cover;
        cursor: pointer;
      }
    }
  }

  .enclosurebtn2:hover .enclosurebtn3 {
    opacity: 1;
  }
}

// 关键字查询输入框
::v-deep.el-form-item {
  margin-bottom: 0;
  margin-top: 0;
}

//分割线
::v-deep .el-divider--horizontal {
  margin: 14px 0 !important;
}

.Investigation {
  width: 400px;
}

::v-deep .label {
  width: 80px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  color: #5e5f61;
  display: inline-block;
  text-align: right;
}

.unchecked {
  ::v-deep .label {
    width: 110px;
  }
}

.picPreview {
  width: 100%;
  height: 100%;
}
.searchButton1 {
  width: 60px;
  height: 30px;
  background: #598af9;
  border-radius: 4px;
  margin-right: 10px;
  font-family: Microsoft YaHei;
  letter-spacing: 2px;
  color: #fefbfb;
}
.pageHeaderSub {
  display: flex;
  align-items: center;
  padding: 10px 0;
  .title {
    text-align: left;
    margin: 5px 0 5px 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5e5c5c;
  }
  .searchButton1 {
    margin-left: 20px;
    margin-top: 0;
  }
}
.resetButton {
  margin-right: 40px;
}
.descriptionsContainer1 {
  padding: 15px 30px;
  ::v-deep .label {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5e5c5c;
    margin-top: 30px;
  }

  ::v-deep .content {
    font-size: 14px;
    margin-left: 5px;
    margin-top: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #aeafb0;
  }
}
</style>
